import React, { useEffect, useState, useRef } from "react";
import '../home/style/home.css';
import {Input, Tabs, Tree} from 'antd';
import { request } from 'dw-mx-request';
import { Modal } from "dw-mx";
import MainPanel from '@/application/MainPanel';
import {FormOutlined} from '@ant-design/icons';

export default function AppPage(props) {

    const [appID, setAppID] = useState('');
    const [pageID, setPageID] = useState('');
    const [pageName, setPageName] = useState('');
    const [panes, setPanes] = useState([]);


    useEffect(() => {
        setAppID(props.appid);
        initAppPage(props.appid);
    }, [props.appid]);

    const initAppPage = async (appid) => {
        const res = await request('/mx/bigScreen/queryPage', {
            appid: appid
        });
        const pageList = JSON.parse(res);
        const paneList = [];
        const pane = {};
        if(pageList && pageList.length > 0){
            pane['title'] = pageList[0]['pagename'];
            pane['key'] = pageList[0]['pageid'];
            paneList.push(pane);
            setPanes(paneList);
            setPageID(pageList[0]['pageid']);
        }
    };


    // const confirmPageNameModal = async () => {
    //
    //     const res = await request('/mx/bigScreen/addPage', {
    //         appid: appID,
    //         pagename: pageName,
    //     });
    //     const result = JSON.parse(res);
    //     if (result['pagenum'] > 0){
    //         alert("应用下页面名称已存在，请重新输入。");
    //         return;
    //     }
    //     const pageList = JSON.parse(result['pagelist']);
    //     setPanes(pageList);
    // };
    //
    // const changePageName = (e) => {
    //     setPageName(e.target.value);
    // };
    //
    //
    // const confirmRename = async () => {
    //     const res = await request('/mx/bigScreen/pageRename', {
    //         appid: appID,
    //         pageid: pageID,
    //         newname: newName,
    //     });
    //     const pageList = JSON.parse(res);
    //     setPanes(pageList);
    //     setPageID(pageList[0]['pageid']);
    // };

    return (
        <div style={{height:'100%',padding:12}}>
            {/*<Modal title="新建页面" visible={createPageShow} onOk={()=>confirmPageNameModal()} onCancel={()=>cancelPageNameModal()}>*/}
                {/*<Input placeholder="新建页面名称" onChange={(val)=>changePageName(val)} />*/}
            {/*</Modal>*/}
            {/*<Modal title="重命名" visible={modifyModel} onOk={()=>confirmRename()} onCancel={()=>cancelRename()}>*/}
                {/*<Input placeholder="新名称" onChange={(val)=>changeNewName(val)} />*/}
            {/*</Modal>*/}
            {/*<Tabs*/}
                {/*type="editable-card"*/}
                {/*onChange={(val)=>onChange(val)}*/}
                {/*activeKey={pageID}*/}
                {/*onEdit={(targetKey, action)=>onEdit(targetKey, action)}*/}
            {/*>*/}
                {/*{panes.map((pane, index) => (*/}
                    {/*<TabPane tab={*/}
                        {/*<span>*/}
                            {/*/!*<Input value={'测试'} readOnly={true} onDoubleClick={(ref)=>test(ref)} />*!/*/}
                            {/*<span style={{marginRight: 15}}>{pane.pagename}</span>*/}
                            {/*<span onClick={()=>rename(pane.pagename)}><FormOutlined style={{marginRight: 0}}/></span>*/}
                        {/*</span>*/}
                    {/*} key={pane.pageid}>*/}
                        {/*<MainPanel appid={appID} pageid={pane.pageid}/>*/}
                    {/*</TabPane>*/}
                {/*))}*/}
            {/*</Tabs>*/}
            {panes.length > 0 ? <MainPanel panes={panes} appid={appID} pageid={panes[0].key}/> : null}
        </div>
    );
}